<template>
  <div class="home-container">
    <div class="welcome-card">
      <div class="welcome-content">
        <h1 class="welcome-title">欢迎来到传统服饰在线平台</h1>
        <a-button
          class="shop-button"
          type="primary"
          danger
          @click="router.push('/shop')"
        >
          购物GoGoGo
        </a-button>
      </div>
      <div class="welcome-image">
        <img src="@/assets/another/homeview1.jpg" alt="welcome image" />
      </div>
    </div>

    <div class="info-cards">
      <!-- 文化相关卡片 -->
      <div
        class="info-card history-card"
        @click="router.push('/culture/history')"
      >
        <div class="card-pattern top-pattern"></div>
        <h3>历史介绍</h3>
        <p class="card-desc">
          你可以在这里看4K镜头放大百倍的金丝绣线，跟着动画穿越回宋代染坊。每月更新古人穿衣指南：汉代小姐姐怎么挑选耳珰，明朝贵妇的云肩藏着哪些星座密码。
        </p>
        <div class="card-pattern bottom-pattern"></div>
      </div>

      <div
        class="info-card discussion-card"
        @click="router.push('/culture/discussion')"
      >
        <div class="card-pattern top-pattern"></div>
        <h3>讨论话题</h3>
        <p class="card-desc">
          你可以在这里聊汉服能不能日常上班穿，争辩复原款与改良款谁更美。每周都有设计师空降群聊，你的建议可能变成下季爆款，让千万人穿上你的创意。
        </p>
        <div class="card-pattern bottom-pattern"></div>
      </div>

      <div class="info-card story-card" @click="router.push('/culture/story')">
        <div class="card-pattern top-pattern"></div>
        <h3>文化故事</h3>
        <p class="card-desc">
          你可以在这里听文物开口说话：那件故宫珍藏的龙袍曾陪着皇帝彻夜批奏折，某件破损的嫁衣藏着战乱年代的爱情。还能参与创作小说——让唐代舞裙成为穿越剧女主战袍。
        </p>
        <div class="card-pattern bottom-pattern"></div>
      </div>

      <!-- 活动相关卡片 -->
      <div
        class="info-card quiz-card"
        @click="router.push('/activity/quiz-competition')"
      >
        <div class="card-pattern top-pattern"></div>
        <h3>知识竞赛</h3>
        <p class="card-desc">
          你可以在这里参加服饰版"诗词大会"，答题解锁冷知识：比如唐朝女装曾有男式翻领、清代一匹龙袍面料够换十套房。积分最高者能体验云锦织造，亲手触碰帝王同款金线。
        </p>
        <div class="card-pattern bottom-pattern"></div>
      </div>

      <div
        class="info-card prize-card"
        @click="router.push('/activity/prize-redemption')"
      >
        <div class="card-pattern top-pattern"></div>
        <h3>奖品兑换</h3>
        <p class="card-desc">
          你可以在这里用积分兑换真正的传统好物：200分换古法胭脂套装，500分订制专属绣花手帕。年度大奖是跟着故宫修复师学修文物，把破碎的清代刺绣救活成艺术品。
        </p>
        <div class="card-pattern bottom-pattern"></div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from "vue-router";

const router = useRouter();
</script>

<style scoped>
.home-container {
  width: 100%;
  min-height: 100vh;
  padding: 8vh 0 10vh;
  background: url("@/assets/background/homeviewbackground.png") no-repeat center
    top;
  background-size: cover;
  position: relative;
  background-color: #f5f5f5;
  display: flex;
  flex-direction: column;
  gap: 8vh;
  font-family: "KaiTi", "楷体", "SimKai", serif;
}

.home-container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.2),
    rgba(0, 0, 0, 0.1)
  );
  z-index: 1;
}

.welcome-card {
  max-width: 95vw;
  width: 1200px;
  height: 160px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
  background: rgba(98, 67, 45, 0.9);
  border-radius: 1rem;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(10px);
  display: flex;
  overflow: visible;
  padding: 0;
  align-items: center;
}

.welcome-image {
  flex: 0 0 40%;
  height: 140%;
  position: absolute;
  right: 2%;
  top: -20%;
}

.welcome-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0.5rem;
  box-shadow: 0 4px 25px rgba(0, 0, 0, 0.25);
}

.welcome-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 0 3rem;
  margin-right: 40%;
}

.welcome-title {
  font-size: 2rem;
  font-weight: bold;
  color: white;
  margin-bottom: 1.2rem;
  line-height: 1.3;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.shop-button {
  height: 38px;
  font-size: 1.1rem;
  padding: 0 2.5rem;
  border-radius: 19px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  background: #ff4d4f;
  border-color: #ff4d4f;
}

.shop-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(255, 59, 48, 0.4);
  background: #ff6b6b;
  border-color: #ff6b6b;
}

.info-cards {
  max-width: 95vw;
  width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem;
  padding: 0;
}

.info-card {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 1rem;
  padding: 2rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10px);
  transition: all 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  min-height: 280px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.info-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 25px rgba(0, 0, 0, 0.15);
}

.info-card h3 {
  font-size: 1.6rem;
  color: #333;
  margin-bottom: 1.2rem;
  text-align: center;
  font-weight: bold;
  position: relative;
  font-family: "KaiTi", "楷体", "SimKai", serif;
}

.info-card h3::after {
  content: "";
  position: absolute;
  bottom: -8px;
  left: 50%;
  width: 60px;
  height: 2px;
  background: linear-gradient(to right, transparent, #a86432, transparent);
  transform: translateX(-50%);
}

.card-desc {
  color: #333;
  font-size: 1rem;
  line-height: 1.7;
  text-align: justify;
  margin: 1rem 0;
  font-family: "KaiTi", "楷体", "SimKai", serif;
}

/* 古风卡片样式 */
.card-pattern {
  position: absolute;
  width: 100%;
  height: 40px;
  left: 0;
  background-repeat: repeat-x;
  background-size: contain;
  opacity: 0.15;
}

.top-pattern {
  top: 0;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 20"><path d="M0,10 Q25,0 50,10 Q75,20 100,10" stroke="%23A86432" stroke-width="1" fill="none"/><path d="M0,15 Q25,5 50,15 Q75,25 100,15" stroke="%23A86432" stroke-width="0.5" fill="none"/></svg>');
}

.bottom-pattern {
  bottom: 0;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 20"><path d="M0,10 Q25,20 50,10 Q75,0 100,10" stroke="%23A86432" stroke-width="1" fill="none"/><path d="M0,5 Q25,15 50,5 Q75,-5 100,5" stroke="%23A86432" stroke-width="0.5" fill="none"/></svg>');
}

/* 不同卡片的样式 */
.history-card {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.95),
    rgba(251, 240, 230, 0.95)
  );
  border-left: 4px solid #8c4b3c;
}

.discussion-card {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.95),
    rgba(230, 244, 251, 0.95)
  );
  border-left: 4px solid #3a7693;
}

.story-card {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.95),
    rgba(241, 236, 226, 0.95)
  );
  border-left: 4px solid #9c7845;
}

.quiz-card {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.95),
    rgba(232, 249, 232, 0.95)
  );
  border-left: 4px solid #3b7b4e;
}

.prize-card {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.95),
    rgba(252, 246, 225, 0.95)
  );
  border-left: 4px solid #af7a15;
}

@media (max-width: 991px) {
  .info-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 576px) {
  .info-cards {
    grid-template-columns: 1fr;
  }

  .welcome-content {
    padding: 0 1.5rem;
  }

  .welcome-title {
    font-size: 1.5rem;
  }

  .info-card {
    padding: 1.5rem;
    min-height: auto;
  }
}
</style>
